<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyZone</title>
</head>
<body>
	<%@ include file="heading.jsp"%>
	<div class="container">
		<div class="row row-offcanvas row-offcanvas-right">

			<%-- 			<div class="col-sm-3">
				<p>hdImgPath:${infos.user.hdImgPath }</p>
				<img src="${infos.user.hdImgPath }" alt="hdImgPath" width="200px" height="200px"/>
				<p>username:${infos.user.username }</p>
				<p>userType:${infos.user.userType }</p>
			</div> --%>

			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
				<div class="well header">My Profiles</div>
				<img src="${infos.user.hdImgPath }" alt="hdImgPath" width="200px"
					height="200px" />
				<div id="hotThreads" class="list-group">
					<li class="list-group-item">hdImgPath:${infos.user.hdImgPath }</li>
					<li class="list-group-item active">username:${infos.user.username }</li>
					<li class="list-group-item">userType:${infos.user.userType }</li>
				</div>
			</div>
			<!--/.sidebar-offcanvas-->

			<div class="col-xs-12 col-sm-9">
				<div class="row">
					<c:forEach items="${infos.threads }" var="threads">
						<div class="col-xs-6 col-lg-4 singleBlock">
							<div class="meida">
								<div class="media-left">
									<a href=""> <img class="media-object"
										src="images/example.png" />
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">${threads.threadsName }</h4>
									<p>........</p>
								</div>
							</div>
						</div>
						<!--/.col-xs-6.col-lg-4-->
					</c:forEach>
				</div>
				<!-- row -->
			</div>
			<!--/.col-xs-12.col-sm-9-->

		</div>
		<!--/row-->

		<hr>

		<footer>
			<p>&copy; Company 2014</p>
		</footer>

	</div>
	<!--/.container-->

	<!-- 	<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> -->
</body>
</html>
